<script setup lang="ts">
import { computed, ref } from 'vue';
import { deviceTypeRecord } from '@/constants/business';

defineOptions({
  name: 'DeviceDetail'
});

interface Props {
  data: TicketManageApi.DeviceManage.Device;
}

const { data } = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const merchantInfo = computed<TicketManageApi.TicketManage.Merchant>(() => {
  try {
    return JSON.parse(data.merchantInfo) || {};
  } catch {
    window.$message?.error('解析企业信息失败');
    return {};
  }
});

const activeTab = ref('device-info');
</script>

<template>
  <NDrawer
    v-model:show="visible"
    display-directive="show"
    :mask-closable="false"
    auto-focus
    :width="500"
    content-class="device-detail-drawer"
  >
    <NDrawerContent title="设备详情" :native-scrollbar="false" closable>
      <NForm label-placement="left" :label-width="150" class="h-full">
        <NTabs
          v-model:value="activeTab"
          type="line"
          size="large"
          :tabs-padding="20"
          pane-style="padding: 20px;"
          class="h-full"
        >
          <NTabPane name="device-info" tab="设备信息" display-directive="show" class="flex-1-hidden">
            <NScrollbar class="h-full" trigger="none">
              <NFormItem label="设备ID：">
                {{ data.id }}
              </NFormItem>
              <NFormItem label="宽带账号：">
                {{ data.account }}
              </NFormItem>
              <NFormItem label="wan口地址：">
                {{ data.wanIp }}
              </NFormItem>
              <NFormItem label="保护内网地址网段：">
                {{ data.protectedSubnet }}
              </NFormItem>
              <NFormItem label="IPSec序列号：">
                {{ data.ipsecIndex }}
              </NFormItem>
              <NFormItem label="MAC地址：">{{ data.mac }}</NFormItem>
              <NFormItem label="设备类型：">
                {{ deviceTypeRecord[data.type] }}
              </NFormItem>
              <NFormItem label="密码资源ID：">
                {{ data.kmsId }}
              </NFormItem>
              <NFormItem label="厂家：">
                {{ data.corporation }}
              </NFormItem>
              <NFormItem label="型号：">{{ data.model }}</NFormItem>
              <NFormItem label="固件版本：">
                {{ data.fwVersion }}
              </NFormItem>
              <NFormItem label="组件版本：">
                {{ data.cpVersion }}
              </NFormItem>
              <NFormItem label="营业执照名称：">
                {{ data.businessLicense }}
              </NFormItem>
              <NFormItem label="信用代码：">
                {{ data.creditCode }}
              </NFormItem>
              <NFormItem label="审计厂家：">
                {{ data.audit }}
              </NFormItem>
              <NFormItem label="省：">
                {{ data.deviceProvince }}
              </NFormItem>
              <NFormItem label="市：">
                {{ data.deviceCity }}
              </NFormItem>
              <NFormItem label="区：">
                {{ data.deviceCounty }}
              </NFormItem>
              <NFormItem label="详细地址：">
                {{ data.deviceAddress }}
              </NFormItem>
            </NScrollbar>
          </NTabPane>
          <NTabPane name="company-info" tab="企业信息" display-directive="show" class="flex-1-hidden">
            <NScrollbar class="h-full" trigger="none">
              <NFormItem label="企业对外名称：">
                {{ merchantInfo.merchantName }}
              </NFormItem>
              <NFormItem label="企业真实名称：">
                {{ merchantInfo.alias }}
              </NFormItem>
              <NFormItem label="名称缩写：">
                {{ merchantInfo.abbr }}
              </NFormItem>
              <NFormItem label="联系人：">
                {{ merchantInfo.contact }}
              </NFormItem>
              <NFormItem label="联系方式：">
                {{ merchantInfo.contactWay }}
              </NFormItem>
              <NFormItem label="省：">
                {{ merchantInfo.province }}
              </NFormItem>
              <NFormItem label="市：">
                {{ merchantInfo.city }}
              </NFormItem>
              <NFormItem label="区：">
                {{ merchantInfo.county }}
              </NFormItem>
              <NFormItem label="详细地址：">
                {{ merchantInfo.address }}
              </NFormItem>
            </NScrollbar>
          </NTabPane>
        </NTabs>
      </NForm>
    </NDrawerContent>
  </NDrawer>
</template>

<style lang="scss">
.n-drawer {
  .device-detail-drawer {
    .n-drawer-content .n-drawer-body-content-wrapper {
      padding: 0;
    }
    .n-scrollbar-content {
      --at-apply: h-full;
    }
  }
}
</style>
